<template>
  <div class="vue-flow__node-default" :style="{
    height: nodeData.height + 'px',
    width: nodeData.width + 'px',
    color: nodeData.color,
    backgroundColor: nodeData.bg_color,
    borderRadius: nodeData.radius + 'px',
  }" style="display: flex; align-items: center;text-align: center;padding: 0px;" :class="nodeData.link ? 'link' : ''">
    <!-- 节点内容 -->
    <!-- 坐标信息（可选） -->
    <div style="text-align: center;width: 100%;" :title="id">
      <div style="font-size: 1.1em;" :title="nodeData.link">
        <el-icon v-if="nodeData.link" style="top: 2px;padding-right: 4px;">
          <Link />
        </el-icon>
        <span style="">{{ nodeData.title }}</span>
      </div>
      <div v-if="nodeData.note" style="font-size: 0.9em;margin-top: 4px;">{{
        nodeData.note }} </div>
    </div>
    <!-- 四个方向的 Handle -->
    <!-- 上：输出（source） -->
    <Handle type="source" :position="Position.Top" :id="`${id}-top-source`" class="handle-top" />

    <!-- 右：输出（source） -->
    <Handle type="source" :position="Position.Right" :id="`${id}-right-source`" class="handle-right" />

    <!-- 下：输入（target） -->
    <Handle type="target" :position="Position.Bottom" :id="`${id}-bottom-target`" class="handle-bottom" />

    <!-- 左：输入（target） -->
    <Handle type="target" :position="Position.Left" :id="`${id}-left-target`" class="handle-left" />
  </div>
</template>

<script setup lang="ts">

import { Position, Handle } from '@vue-flow/core'
import type { NodeProps } from '@vue-flow/core'
import { reactive } from 'vue';
import type { FlowNodeData } from './type/FlowNodeData';

// 接收节点属性
const props = defineProps<NodeProps>()


// 解构常用属性
const { id } = props
const nodeData: FlowNodeData = reactive(props.data)
//const { id, data, position } = props

// 格式化坐标（用于显示）
// const x = computed(() => `${Math.round(position.x)}px`)
// const y = computed(() => `${Math.round(position.y)}px`)
</script>
<style scoped>
.selected {
  border: 0px dashed;
}

.selected .vue-flow__node-default {
  border-style: dashed;
}

.vue-flow__node-default {
  border-width: 2px;
  border: 2px solid #ffffff;
  font-size: 14px;
  opacity: 0.9;
}

.vue-flow__node-default.link {
  cursor: pointer;
}

.vue-flow__node-default.link:hover {
  opacity: 1;
}

/* 可选：为句柄添加样式 */
.handle-top,
.handle-right,
.handle-bottom,
.handle-left {
  background: #409eff;
  border: 1px solid white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  opacity: 0.5;
}



/* 鼠标悬停时显示句柄 */
.vue-flow__node-default:hover .handle {
  opacity: 1;
}

/* 可以添加 hover 效果 */
.handle-top:hover,
.handle-right:hover,
.handle-bottom:hover,
.handle-left:hover {
  background: #fff;
  border-color: #409eff;
  width: 20px;
  height: 20px;
}
</style>
